<template>
  <van-search v-model="value" placeholder="搜一搜" shape="round" />
  <div class="top_tab">
    <router-link to="/" class="active">剧本推荐</router-link>
    <router-link to="/dm" class="center">DM推荐</router-link>
    <router-link to="/list">剧本列表</router-link>
  </div>

  <router-view></router-view>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  components: {},
};
</script>
<style lang="less" scoped>
.router-link-exact-active {
  color: #fefefe;
  background: #9966cc;
  border: n;
}
.top_tab {
  display: flex;
  justify-content: center;

  a {
    border: 0.01rem solid #c3c3c3;
    border-radius: 0.05rem;
    display: block;
    font-size: 0.15rem;
    width: 1.05rem;
    height: 0.3rem;

    text-align: center;
    line-height: 0.3rem;
  }
  .center {
    margin: 0 0.1rem;
  }
}
.search {
  text-align: center;
  height: 0.3rem;
  position: relative;
  input {
    width: 3.35rem;
    height: 0.3rem;
    outline: none;
    border-radius: 0.25rem;
    border: none;
    background: #eee;
    padding-left: 0.3rem;
    font-size: 0.11rem;
  }
  .search_icon {
    font-size: 0.14rem;
    position: absolute;
  }
}
</style>
<style>
:root {
  --van-search-content-background-color: #eee;
}
</style>
